---
import { SITE_TITLE } from '../consts'

import DropdownWrapper from './DropdownWrapper.astro'
import HeaderCta from './HeaderCta.astro'
import HeaderLink from './HeaderLink.astro'
import SearchWrapper from './SearchWrapper.astro'
import Social from './Social.astro'
---

<header class="border-b border-stone-300 bg-white">
  <div class="mx-auto flex h-16 max-w-7xl items-center gap-4 px-4">
    <nav class="flex flex-1 items-center gap-8">
      <h2 class="font-medium">
        <a href="/" class="inline-block focus:ring-2 focus:ring-pink-500 focus:outline-0">
          {SITE_TITLE}
          <span aria-hidden="true"> 🚀 </span>
        </a>
      </h2>

      <div class="hidden gap-4 sm:flex">
        <HeaderLink href="/components/application">Application</HeaderLink>
        <HeaderLink href="/components/marketing">Marketing</HeaderLink>
        <HeaderLink href="/blog">Blog</HeaderLink>
      </div>
    </nav>

    <SearchWrapper />

    <Social />

    <DropdownWrapper />
  </div>
</header>

<HeaderCta />
